<template>
	<!-- 跑腿/搬运订单 -->
	<view class="runErrandsTransport">
		<view class="main">
			<view class="main-item" v-for="item in postList" :key="item.id">
				<!-- 头部 -->
				<view class="header flexjcsb">
					<view class="flexjcc" @click="JumpDetails(item)">
						<text>{{ item.order_type_desc }}</text>
					</view>
					<view class="">
						{{ item.order_status_desc }}<text>></text>
					</view>
				</view>
				<!-- 地址 -->
				<view class="address" @click="JumpOrderGoods(item)">
					<view class="address-start" v-if="item.order_type != 3">
						<view class="drop"></view>
						<view class="address-main">
							<view class="">
								{{ item.take_address.data.address }}
							</view>
							<view class="">
								{{ item.take_address.data.mobile }}
							</view>
						</view>
					</view>
					<view class="address-end">
						<view class="drop"></view>
						<view class="address-main">
							<view class="">
								{{ item.receiving_address.data.address }}
							</view>
							<view class="">
								{{ item.receiving_address.data.mobile }}
							</view>
						</view>
					</view>
				</view>
				<!-- 下单时间 -->
				<view class="dateTime flexjcsb">
					<view class="dateTime-main">
						<!-- <text>{{ item.date }}</text> -->
						<text>{{ item.create_time }}</text>
					</view>
					<view class="dateTime-button">
						<view class="dateTime-button-one" v-if="item.order_status == 0">
							<view class="solid flexjcc" @click="topay(item)">
								去支付
							</view>
						</view>
						<view class="dateTime-button-two" v-if="item.order_status == 2 || item.order_status == 3">
							<view class="void flexjcc" @click="MakingPhoneCalls(item)">
								联系骑手
							</view>

						</view>
						<!-- <view class="dateTime-button-two" v-if="item.paymentStatus == 4">
							<view class="void flexjcc">
								再来一单
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 支付弹窗 -->
		<u-popup v-model="popups" mode="bottom" border-radius="40">
			<view class="popups-content">
				<view style="text-align: center;">
					支付方式
				</view>
				<view class="checkbox">
					<uni-data-checkbox v-model="modeOfPayment" :localdata="[{
						text: '微信支付',
						value: 0
					}]"></uni-data-checkbox>
				</view>
				<view class="checkbox">
					<uni-data-checkbox v-model="modeOfPayment" :localdata="[{
						text: '余额支付',
						value: 1
					}]"></uni-data-checkbox>
				</view>
				<view class="payment-button">
					<button @click="immediatePayment">立即支付</button>
				</view>
			</view>
		</u-popup>

		<!-- 余额支付 -->
		<u-popup v-model="payShow" mode="bottom" height="900" border-radius="40">
			<PayKeyboard ref="payKeyboardRef" @payWordpass="getPayWordpass"></PayKeyboard>
		</u-popup>
	</view>
</template>
<!-- 支付状态;0-待支付;1-已支付; 订单状态;0-待支付;1-待接单;2-进行中;3-已完成;4-已关闭 -->
<script>
import PayKeyboard from '@/components/PayKeyboard/index.vue'

const $api = require('@/utils/request.js').API

export default {
	components: {
		PayKeyboard
	},
	data() {
		return {
			postList: [],
			popups: false,
			payShow: false,
			// 支付列表
			paymentamount: [{
				text: '微信支付',
				value: 0
			},
			{
				text: '余额支付',
				value: 1
			},
			],
			sn: '',
			// 支付方式
			modeOfPayment: 0
		}
	},

	mounted() {
		this.getList()
	},
	methods: {

		// 获取列表
		getList() {
			let obj = {
				page: 1,
				page_size: 1000,
				// order_status: 1
			}
			$api.orderLists(obj).then(res => {
				this.postList = res.data.data || []
				console.log(this.postList);
			})
		},

		// 去支付
		topay(item) {
			this.popups = true
			this.sn = item.id
		},
		// 立即支付
		immediatePayment() {
			// 微信支付
			if (this.modeOfPayment == 0) {
				$api.payPrepay({
					order_id: this.sn,
					pay_type: 'wechatpay',
					is_matched: 0,
				}).then(res => {
					console.log(res.data.data);
					$api.postOrderGoodsPayment({
						out_trade_no: res.data.data,
						pay_type: 'wechatpay',
						is_matched: 0,
					}).then(res => {
						let obj = res.data.data.data
						this.popups = false
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: obj.timeStamp,
							nonceStr: obj.nonceStr,
							package: obj.package,
							signType: obj.signType,
							paySign: obj.paySign,
							success: function (res) {
								uni.navigateTo({
									url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 1
								})
							},
							fail: function (err) {
								uni.navigateTo({
									url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 2
								})
							}
						});
					})
				})
			} else {
				// 余额支付
				this.payShow = true
				this.popups = false
				this.$refs.payKeyboardRef.onPayUp();
			}

		},
		//获取余额支付支付密码
		getPayWordpass(wordpass) {
			$api.checkpaypassword({ pay_password: wordpass }).then(res => {
				$api.postOrderGoodsPayment({
					out_trade_no: this.sn,
					pay_type: 'BALANCE',
					is_matched: 0,
				}).then(res => {
					this.payShow = false
					uni.navigateTo({
						url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 1
					})
				})
			}).catch(err => {
				console.log(err);
			})
		},

		// 拨打电话
		MakingPhoneCalls(item) {
			uni.makePhoneCall({
				phoneNumber: item.delivery_member_info.mobile
			})
		},
		// 跳转订单信息
		JumpOrderGoods(item) {
			// 跳转订单信息
			uni.navigateTo({
				url: `/pages_runErrands/OrderingInformation?data=${JSON.stringify(item)}`
			})

		},
	}
}
</script>

<style lang="less" scoped>
.runErrandsTransport {
	background: #FBFBFB;

	.main {
		.main-item {
			width: 702rpx;
			// height: 368rpx;
			height: 385rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(118, 118, 118, 0.09);
			border-radius: 10rpx;
			margin: auto;
			margin-top: 12rpx;

			// 头部
			.header {
				view:first-child {
					width: 121rpx;
					height: 49rpx;
					background: rgba(241, 69, 0, 0.3);
					border-radius: 5rpx;
					margin: 14rpx 0 0 24rpx;

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #F14500;
					}
				}

				view:last-child {
					font-size: 26rpx;
					font-weight: 400;
					color: #888888;
					padding: 14rpx 24rpx 0 0;

					text {
						padding-left: 10rpx;
					}
				}
			}

			// 地址
			.address {
				padding-top: 20rpx;

				// 点
				.drop {
					width: 15rpx;
					height: 15rpx;
					border-radius: 50%;
					margin: 0 10rpx 0 24rpx;
				}

				.address-start {
					display: flex;
					align-items: center;
					height: 110rpx;

					// background: aqua;
					.drop {
						background: #F3D11F;
					}

					.address-main {
						view:first-child {
							font-size: 30rpx;
							font-weight: 500;
							color: #202020;
						}

						view:last-child {
							font-size: 20rpx;
							font-weight: 400;
							color: #828282;
						}
					}
				}

				.address-end {
					display: flex;
					align-items: center;
					height: 110rpx;

					// background: pink;
					.drop {
						background: #F14500;
					}

					.address-main {
						view:first-child {
							font-size: 30rpx;
							font-weight: 500;
							color: #202020;
						}

						view:last-child {
							font-size: 20rpx;
							font-weight: 400;
							color: #828282;
						}
					}
				}
			}

			// 下单时间
			.dateTime {
				padding: 0 25rpx;

				.dateTime-main {
					font-size: 20rpx;
					font-weight: 300;
					color: #888888;

					text:last-child {
						padding-left: 15rpx;
					}
				}

				.dateTime-button {

					// 虚
					.void {
						width: 156rpx;
						height: 60rpx;
						border: 1px solid #F14500;
						border-radius: 6rpx;
						font-size: 24rpx;
						font-weight: 300;
						color: #F14500;
					}

					// 实
					.solid {
						width: 155rpx;
						height: 59rpx;
						background: #F14500;
						border-radius: 6rpx;
						font-size: 24rpx;
						font-weight: 300;
						color: #FFFFFF;
					}

					// 单
					// .dateTime-button-one {}

					// 双
					.dateTime-button-two {
						display: flex;

						view:last-child {
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
}

// 支付弹窗
.popups-content {
	width: 750rpx;
	position: relative;
	border-radius: 40px;
	padding-top: 30rpx;


	.checkbox {
		width: 100% !important;
		height: 80rpx;
		margin: 20rpx 30rpx;

		.checklist-box {
			display: block;
			width: 100% !important;
			height: 49.3rpx;
			margin-bottom: 30rpx;

			.checklist-content {
				float: left;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 121rpx;
			}

			.radio__inner {
				float: right;
			}
		}

		.is-checked {
			color: #F14500 !important;
		}
	}

	.payment-button {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 62rpx 0;
		margin-top: 0;

		button {
			width: 664.4rpx;
			height: 88.5rpx;
			background-color: #f14500;
			color: #fff;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			border-radius: 44rpx;
			line-height: 88.5rpx;
		}
	}
}
</style>